<template>
	<div class="pt-4 text-center">
		<base-image src="logo-circle.svg" />
		<div class="mt-1 mb-2 text-sm text-t-2">{{ $t('betslip.login') }}</div>
		<base-button type="primary" textT="account.login" bold block @click="onLogin" />
		<div class="mt-4 flex justify-center text-sm text-t-1">
			<div>{{ $t('account.noAccount') }}</div>
			<div class="ml-1 text-primary app-text-react" @click="onRegister">
				{{ $t('account.register') }}
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseButton, BaseImage } from '@/components/base'
import { useAccountStore } from '@/store'
import { AccountShowType } from '@/types'

const accountStore = useAccountStore()

const onLogin = () => {
	console.log('onLogin')

	accountStore.showAccount(AccountShowType.login)
}

const onRegister = () => {
	accountStore.showAccount(AccountShowType.register)
}
</script>
